<template>
  <div class="list-container">
    <div class="search-wrapper">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="物料编码：">
          <el-input v-model="searchForm.materialCode" placeholder="请输入物料编码"></el-input>
        </el-form-item>
        <el-form-item label="物料名称：">
          <el-input v-model="searchForm.materialName" placeholder="请输入物料名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <div class="table-wrapper">
      <el-table
        v-loading="loading"
        :data="tableData"
        border
        style="width: 100%"
        :header-cell-style="{background:'#f8f8f9'}"
      >
        <el-table-column prop="MaterialCode" label="物料编码" align="center"></el-table-column>
        <el-table-column prop="MaterialName" label="物料名称" align="center"></el-table-column>
        <el-table-column prop="Unit" label="单位" align="center"></el-table-column>
        <el-table-column prop="PlanAmount" label="计划数量" align="center"></el-table-column>
        <el-table-column prop="UnitPrice" label="单价" align="center"></el-table-column>
        <el-table-column prop="TotalPrice" label="总价" align="center"></el-table-column>
        <el-table-column prop="DeliveryDate" label="交付日期" align="center"></el-table-column>
        <el-table-column prop="Remark" label="备注" align="center"></el-table-column>
      </el-table>
      
      <div class="pagination-wrapper">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'MaterialPlanList',
  data() {
    return {
      loading: false,
      searchForm: {
        materialCode: '',
        materialName: ''
      },
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.loading = true;
      const params = {
        page: this.currentPage,
        pageSize: this.pageSize,
        ...this.searchForm
      };
      
      axios.get('/api/material_plan_xie/material_plan_list', { params })
        .then(response => {
          this.tableData = response.data.items || [];
          this.total = response.data.total || 0;
        })
        .catch(error => {
          console.error('获取数据失败:', error);
          this.$Message.error('获取数据失败，请重试');
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleSearch() {
      this.currentPage = 1;
      this.fetchData();
    },
    resetSearch() {
      this.searchForm = {
        materialCode: '',
        materialName: ''
      };
      this.currentPage = 1;
      this.fetchData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    }
  }
};
</script>

<style scoped>
.list-container {
  padding: 20px;
}
.search-wrapper {
  margin-bottom: 20px;
}
.table-wrapper {
  margin-top: 20px;
}
.pagination-wrapper {
  margin-top: 20px;
  text-align: right;
}
</style>